<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<title>${initParam.WxAppName}</title>
		<link rel="stylesheet" href="${pageContext.request.contextPath}/bettery/js/jquery.confirm/jquery.confirm.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/bettery/css/life.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/bettery/css/lifeAddress.css">
		
		<script type="text/javascript" src="${pageContext.request.contextPath}/dewei/js/jquery.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/bettery/js/jquery.confirm/jquery.confirm.js"></script>
		<script src="${pageContext.request.contextPath}/bettery/js/jquery-ui-1.10.4.custom.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/bettery/js/bettery_common.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/bettery/js/jquery.validate.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/bettery/js/template.js"></script>
		<script type="text/javascript"></script>
	</head>
	<body>	
	<div id="wrapBody" class="wx_wrap">
	<form id="addressForm"  action="saveUserAddr.do" method="post">
	        <div style="" class="address_new" id="pageAddAddress">
		        <p>
				<label for=""><span class="tit">收货人</span>
				<input type="hidden" value="${wxaddress.id}" name="wxaddress.id">
				<input type="text" placeholder="姓名" value="${wxaddress.cname}" name="wxaddress.cname" autofocus="no" id="name">
				</label></p>
		        <p>
				<label for=""><span class="tit">联系方式</span>
				<input type="tel" placeholder="手机或电话号码 " value="${wxaddress.mobi}" name="wxaddress.mobi" autofocus="no" id="mobile">
				</label>
		        </p>
		        <p class="area">
		        <label for=""><span class="tit">省</span>
		        <s:select  id="selectProvince" cssClass="select" list="provinceList" listKey="name"
		        listValue="name" headerKey="" headerValue="选择省" onchange="getShi(this,'selectCity','selectCounty')" name="wxaddress.province">
		        
		        </s:select>
		        </label>
		        <label style="" for="">
				<span class="tit">市</span>
					<s:if test="wxaddress.city!=null">
					  <s:select list="cityList"  cssClass="select"  listKey="name" listValue="name" headerKey="" headerValue="选择市" id='selectCity' 
					   onchange='getQu(this,"selectCounty")' name='wxaddress.city'></s:select>
					</s:if>
					<s:else>
					  <select id="selectCity" onchange='getQu(this,"selectCounty")' name='wxaddress.city'><option value="">请选择市</option></select>
					</s:else>
				</label>
		        <label style="" for=""><span class="tit">区/县</span>
				<s:if test="wxaddress.town!=null">
							<s:select list="areaList" listKey="name" listValue="name"	headerKey="" headerValue="选择区" id="selectCounty"	
							cssClass='select' name="wxaddress.town"	></s:select>
						</s:if>
				<s:else><select id="selectCounty" name="wxaddress.town" ><option value="">请选择乡镇</option></select>
				</s:else>
				</label>
				</p>     
		        <p>
				<label for="">
				<span class="tit">详细地址</span>
				<input type="text" placeholder="街道地址" value="${wxaddress.address}" name="wxaddress.address" id="adinfo">
				</label>
				</p>     
		        <p class="action">
				<button id="submitAddress" class="submit">确认</button>
				</p> 
	        </div>
	       </form> 
	</div>

	<script id="test" type="text/html">
	
	</script>
	<script>
$(function(){
	jQuery.validator.addMethod("mobilePhone", function(value, element)
	{
		var length = value.length;
		var tel = /^((1[3|4|5|8]{1}[0-9]{1})+\d{8})$/;
		return this.optional(element) || (length == 11 && tel.test(value));
	}, "格式错误 ");
    $("#addressForm").validate(
	{
		rules :
		{
			"wxaddress.mobi" :
			{
				required : true,
				mobilePhone:true
			}
		},
		messages :
		{
			"wxaddress.mobi" :
			{
				required : "请填写您的手机号"
			}
		}
	});
});
		function getShi(obj,shiId,quId){
				if($(obj).val()==''){
					$("#"+shiId).empty();
					$("#"+shiId).html("<option value=''>选择市</option>");
					$("#"+quId).empty();
					$("#"+quId).html("<option value=''>选择区</option>");
					return;
				}
				$.ajax({
					url:'../district/queryCityByProvince.do?t='+(new Date()),
					type:'post',
					data:{pname:$(obj).val()},
					dataType:'json',
					success:function(json){
						var shis = json;
						$("#"+quId).empty();
						$("#"+quId).html("<option value=''>选择区</option>");
						var html = "<option value=''>选择市</option>";
						for(var i=0;i<shis.length;i++){
							html +="<option value='"+shis[i].name+"'>"+shis[i].name+"</option>";
						}
						$('#'+shiId).html(html).parent().css('display','');
					}
				});
			}
			
			function getQu(obj,quId){
				$.ajax({
					url:'../district/queryTownByCity.do?t'+(new Date()),
					type:'post',
					data:{pname:$(obj).val()},
					dataType:'json',
					success:function(json){
						var qus = json;
						var html = "<option value=''>选择区</option>";
						for(var i=0;i<qus.length;i++){
							html +="<option value='"+qus[i].name+"'>"+qus[i].name+"</option>";
						}
						$('#'+quId).html(html).parent().css('display','');
					}
				});
			}
	</script>
	</body>
</html>